<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="my demo">
    <meta name="keywords" content="算法，计算机，编程，html">
    <link rel="icon" href="/images/logo2.jpg">
    <title>acwing</title>
</head>

<body>
    <!-- part1 文本-->
    <div>
        <h1>1.文本</h1>
        <!-- 这是标题 默认为div类型-->
        <!-- 字体大小依次减小-->
        <h1>hello world</h1>
        <h2>hello world</h2>
        <h3>hello world</h3>
        <h4>hello world</h4>
        <h5>hello world</h5>
        <h6>hello world</h6>
        <!-- 这是段落 会过滤掉所有的空格和回车-->
        <!-- 回车用</br>  空格用&nbsp -->
        <p>
            <hr> <!-- 此处用于加上水平线 -->
            int sum = 0; </br>
            &nbsp; &nbsp; for (int i = 0; i &lt; 100; i++) { </br>
            &nbsp; &nbsp; a[i]++; </br>
            &nbsp; &nbsp;sum +=a[i]; </br>
            } </br>
            <hr> <!-- 此处用于加上水平线 -->
        </p>
        <!-- 这里<b>用于加粗 而<i>用于斜体 -->
        <p>
            <b>毛主席说：“我死了，可以开个庆祝会。你要打扮得漂漂亮亮的，
                最好穿颜色鲜<ins>艳的红衣服或花衣服</ins>，要兴高采烈、满面春风地参加庆祝会，
                然后你就大大方方地上台去讲话。”“讲什么？”吴旭君茫然地问。“你就讲：
                同志们，今天我们这个大会是个胜利的大会。毛泽东死了。我们大家来庆祝辩</b>
            <hr>
            <i>
                证法的胜利。他死得好。如果不死人，从孔夫子到现在地球就装不下了。新陈
                代谢嘛。‘沉舟侧畔千帆过，病树前头万木春。’这是事物发展的规律。”
                停了一会儿，他认真地对吴旭君说：“我在世时吃鱼比较多，我死后把我火化，
                骨灰撒到长江里喂鱼。你就对鱼说：鱼儿呀，毛泽东给你们赔不是来了。他
                生前吃了你们，现在你们吃他吧，吃肥了你们好去为人民服务。
                这就叫物质不灭定律。”</i>
            <hr>
        </p>
        <!-- 这样可以不过滤所有的空格 -->
        <pre>
        int sum = 0;
        for (int i = 0; i &lt; 100; i++) { 
            a[i]++; 
            sum +=a[i]; 
        } 
        <hr>
        </pre>
    </div>
    <!-- part2 图片-->
    <div>
        <h1>2.图片</h1>
        <!-- alt用于描述图片信息 -->
        <img width="300" height="100" src="/images/logo2.jpg" alt="">
        <img width="300" height="100" src="/images/logo2.jpg" alt="">
        <img width="300" height="100" src="/images/logo2.jpg" alt="">
    </div>
    <!-- part3 音频 和 视频-->
    <div>
        <h1>3.Audio</h1>
        <audio controls>
            <source src="/audios/262946487.mp3" type="audio/mpeg">
            <source src="/audios/3894617228.mp3" type="audio/mpeg">
        </audio>
        <audio controls>
            <source src="/audios/3894617228.mp3" type="audio/mpeg">
            <source src="/audios/3894617228.mp3" type="audio/mpeg">
        </audio>
        <h1>4.Video</h1>
        <video controls>
            <source src="/videos/video1.mp4" type="video/mp4">
            <source src="/videos/video2.mp4" type="video/mp4">
        </video>
    </div>
    <!-- part4 超链接 -->
    <div>
        <h1>5.超链接</h1>
        <!-- 这里加入_blank可以跳转到一个新页面-->
        <a href="https://www.acwing.com" target="_blank">Acwing</a>
        <a href="/abount.html">about</a>
    </div>
    <!-- part5 表单-->
    <div>
        <h1>6.表单</h1>
        <!-- placeholder用于把数据隐藏在输入框中-->
        <!-- 点击sumbit 调用action函数-->
        <form action="/abount.html">
            <label for="username"></label>
            <input placeholder="用户名" type="text" name="ggg" id="username">

            <br>
            <label for="age"></label>
            <input placeholder="年龄" type="number" name="fff" id="age">

            <br>
            <label for="email"></label>
            <input placeholder="邮箱" type="email" name="hhh" id="email">

            <br>
            <label for="password"></label>
            <input placeholder="密码" name="iii" id="password">

            <!-- 同一个name内只能选取一个 -->
            <br>
            <label for="cpp">cpp</label>
            <input type="radio" name="lang" id="cpp">

            <br>
            <label for="java">java</label>
            <input type="radio" name="lang" id="java">

            <br>
            <label for="python">python</label>
            <input type="radio" name="lang" id="python">

            <br>
            <label for="reume">用户名</label>
            <textarea name="resume" id="resume" rows="10" cols="50"></textarea>

            <br>
            <!-- select用于默认 -->
            <label for="lang">语言</label>
            <select name="lang" id="lang">
                <option value="">请选择</option>
                <option selected value="Cpp">cpp</option>
                <option value="Java">java</option>
                <option value="Python">python</option>
            </select>

            <br>
            <button type="submit">提交</button>
        </form>
    </div>
    <div>
        <!-- ul是无序列表 ol是有序列表 -->
        <!-- ul用点来表示 ol用1,2,3顺序表示 -->
        <h1>7.列表</h1>
        <ol>
            <li>
                知识点
                <ul>
                    <li>1.1 vscode</li>
                    <li>1.2 html</li>
                    <li>1.3 web </li>
                </ul>
            </li>
            <li>
                作业
            </li>
        </ol>
    </div>

    <div>
        <h1>8.表格</h1>
        <table>
            <!-- 标题 -->
            <caption>成绩单</caption>
            <!-- 表头 每个tr表示一行 -->
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                </tr>
            </thead>
            <!-- 表体 每个tr表示一行 -->
            <tbody>
                <tr>
                    <td>alice</td>
                    <td>100</td>
                    <td>99</td>
                    <td>98</td>
                </tr>
                <tr>
                    <td>bob</td>
                    <td>93</td>
                    <td>93</td>
                    <td>95</td>
                </tr>
                <tr>
                    <td>cancy</td>
                    <td>91</td>
                    <td>93</td>
                    <td>99</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <h1>9.语义标签</h1>
        <header>
            <h3>我的收藏</h3>
        </header>
        <nav>
            <ul>
                <li>
                    <a href="=/edit.html">编辑</a>
                </li>
                <li>
                    <a href="=/contact.html">联系我</a>
                </li>
                <li>
                    <a href="=/about.html">关于我们</a>
                </li>
            </ul>
        </nav>
        <hr>
        <section>
            <h3>图片</h3>
            <figure>
                <img src="/images/logo.jpg" width="100" alt="logo">
                <figcaption>logo</figcaption>
            </figure>
            <figure>
                <img src="/images/logo2.jpg" width="100" alt="logo">
                <figcaption>logo2</figcaption>
            </figure>
        </section>
        <hr>
        <section>
            <h3>文章</h3>
            <article>
                <h4>北影</h4>
                <p>aaaaaaaaaaaa</p>
                <p>bbbbbbbbbbbb</p>
            </article>
            <article>
                <h4>上戏</h4>
                <p>cccccccccccc</p>
                <p>dddddddddddd</p>
            </article>
        </section>
        <footer>
            &copy;2018-2022 xf 版权所有
        </footer>
    </div>
    <div>
        <h1>10.特殊符号</h1>
        <p>
            #include &lt;iostream;&gt;
            &amp &quot &reg &copy &trade &nbsp;
        </p>
    </div>
</body>

</html>